<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../styles/common.css"/>
    <link rel="stylesheet" href="../styles/page.css"/>
    <style>
        #form {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            padding: 20px 20px 20px 10px;
            margin-right: 10px;
            background-color: #f5f5f5;
        }

        #center {
            margin-top: -15%;
            margin-bottom: 20%;
            position: relative;
            height: 100vh;
        }

        #title {
            font-size: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="title" style="text-align: center">
        <p>信息修改</p>
    </div>
    <div id="center" style="text-align: center">
        <el-form id="form" :model="userInfo" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                 class="demo-ruleForm">
            <el-form-item label="名称">
                <el-input v-model="userInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="账号">
                <el-input v-model="userInfo.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="userInfo.password"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
                <el-input v-model="userInfo.phone"></el-input>
            </el-form-item>
            <!--  性别-->
            <el-form-item label="性别:" prop="sex">
                <el-radio-group v-model="userInfo.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="身份证号码" v-if="userInfo.idNumber&&userInfo.idNumber!=''">
                <el-input v-model="userInfo.idNumber"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="goBack()"> 取消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')"> 保存</el-button>
                </el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="subBox address">
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/admin.js"></script>
<script src="../api/member.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                id: undefined,
                userInfo: {
                    name: "",
                    username: "",
                    password: "",
                    phone: "",
                    sex: "",
                    idNumber: ''
                },
                isAdmin: false
            }
        },
        mounted() {
            this.init()
        },
        computed: {
            rules() {
                //校验器
                const validateName = (rule, value, callback) => {
                    if (value.length > 10) {
                        callback(new Error('名称不能超过10个字'))
                    } else {
                        callback()
                    }
                }
                const validateUsername = (rule, value, callback) => {
                    if (value.length < 5) {
                        callback(new Error('用户名至少应该在5位以上'))
                    } else {
                        callback()
                    }
                }
                const validatePassword = (rule, value, callback) => {
                    if (value.length < 5) {
                        callback(new Error('密码至少应该在5位以上'))
                    } else {
                        callback()
                    }
                }
                const validatePhone = (rule, value, callback) => {
                    if (value.length != 11) {
                        callback(new Error('请保持11位的手机号'))
                    } else {
                        callback()
                    }
                }
                const validateSex = (rule, value, callback) => {
                    if (value.length = 0 || value === "") {
                        callback(new Error('请选择性别'))
                    } else {
                        callback()
                    }
                }
                const validateIdNumber = (rule, value, callback) => {
                    if (value.length != 18) {
                        callback(new Error('请保持18位的身份证号'))
                    } else {
                        callback()
                    }
                }
                return {
                    name: [{'validator': validateName, 'trigger': 'blur'}],
                    username: [{'validator': validateUsername, 'trigger': 'blur'}],
                    password: [{'validator': validatePassword, 'trigger': 'blur'}],
                    phone: [{'validator': validatePhone, 'trigger': 'blur'}],
                    sex: [{'validator': validateSex, 'trigger': 'blur'}],
                    idNumber: [{'validator': validateIdNumber, 'trigger': 'blur'}]
                }
            }
        },
        methods: {
            //获取表单的数据
            init() {
                //修改标记
                if (Boolean(localStorage.getItem("admin"))) {
                    this.isAdmin = true
                }
                let userInfo = JSON.parse(localStorage.getItem("userInfo"))
                this.id = userInfo.id;
                if (this.isAdmin === true) {
                    queryAdminById(this.id).then(res => {
                        if (String(res.code) === '1') {
                            this.userInfo = res.data;
                            this.userInfo.sex = res.data.sex === 1 ? '男' : '女'
                        } else {
                            this.$message.error(res.msg || '操作失败')
                        }
                    })
                } else {
                    queryEmployeeById(this.id).then(res => {
                        if (String(res.code) === '1') {
                            this.userInfo = res.data;
                            this.userInfo.sex = res.data.sex === 1 ? '男' : '女'
                        } else {
                            this.$message.error(res.msg || '操作失败')
                        }
                    })
                }
            },
            submitForm(formName) {
                let isAdmin = this.isAdmin;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let params = this.userInfo;
                        params.sex = this.userInfo.sex === '男' ? 1 : 0;
                        params.id = this.id
                        if (isAdmin == true) {
                            editAdmin(params).then(res => {
                                if (String(res.code) === '1') {
                                    window.location.href = '../index.html'
                                } else {
                                    this.$message.error(res.msg || '操作失败')
                                }
                            })
                        } else {
                            editEmployee(params).then(res => {
                                if (String(res.code) === '1') {
                                    window.location.href = '../index.html'
                                } else {
                                    this.$message.error(res.msg || '操作失败')
                                }
                            })
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            goBack() {
                window.location.href = '../index.html'
            }
        }
    })
</script>
</body>
</html>